@graywhite-color: #fefefe;

// text
@text-color: @graywhite-color;

// mian color
@disabled-color: white;
@primary-color: #1DA57A;
@primary-color1: #288b73;
@primary-color2: rgba(41, 143, 117, 0.6);
@primary-color3: #298f75;
@primary-color4: #39a47e;
@danger-color: #ff4d4d;
@warning-color:#9c931a;

@color-yellow: rgba(41, 143, 117, 0.6);

@link-color: @primary-color;

@border-radius-base : 2px;

@dark-color: rgb(29, 35, 38);
@dark-color1: rgba(16, 39, 42, 0.3);
@dark-color2: rgba(6, 15, 17, 0.4);
@dark-color3: rgba(0, 0, 0, 0.7);
@dark-color4: rgba(4, 17, 16, 0.7);


@component-background: @primary-color2;
@border-color-base: @primary-color1;
@disabled-bg: #83b9a8;




:global {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: @graywhite-color;
    }
}


// layout
:global(.ant-layout) {
    background: url('/dist/images/layoutbg1.png') repeat;
}

// menu 
@menu-bg: @dark-color;
@menu-popup-bg: @dark-color;
@menu-item-color: @graywhite-color;
@menu-item-active-bg: @dark-color;

:global {
    .ant-menu-horizontal {
        border-bottom: 1px solid @dark-color;
    }

    .ant-dropdown-menu {
        background-color: @dark-color4  !important;
    }

    .ant-dropdown-menu-item-active {
        color: @primary-color2  !important;
    }

    .ant-input-group-addon .ant-select-focused .ant-selectselection, .ant-input-group-addon .ant-select-open .ant-select-selection{
        color:@graywhite-color !important;
    }
}

// divider
:global{
    .ant-divider-horizontal.ant-divider-with-text-center, .ant-divider-horizontal.ant-divider-with-text-left, .ant-divider-horizontal.ant-divider-with-text-right{
        color: @graywhite-color!important;
    }
}

// alert
:global{
    .ant-alert{
        color: @dark-color3!important;
    }
}

// input
:global{
    .ant-input-group-addon{
        background-color: @primary-color2!important;
    }
}

// tab
:global {

    .ant-tabs-bar {
        border-bottom: 0;
    }

    .ant-tabs .ant-tabs-top-content {
        background: @dark-color1;
        border: 1px solid @primary-color2;
    }

    .ant-tabs-nav .ant-tabs-tab {
        background: @dark-color1;
        color: @graywhite-color;
        border: 1px solid @primary-color2;
        margin: 0px !important;
        padding:4px 16px;
    }

    .ant-tabs-nav .ant-tabs-tab-active {
        background: @primary-color2;
        color: @graywhite-color;
        border: 1px solid @primary-color1;
        margin: 0px !important;
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
        background: @dark-color1;
        color: @graywhite-color;
        border: 1px solid @primary-color2;
    }

    .ant-tabs .ant-tabs-left-content{
        padding-left: 0px !important;
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
        background: @primary-color2;
        color: @graywhite-color;
        border: 1px solid @primary-color1;
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x {
        color: @graywhite-color;
    }

}


// collapse
@collapse-header-bg: @primary-color2;
@collapse-content-bg: @dark-color3;

:global {
    .ant-collapse {
        border: 1px solid @primary-color1  !important;
    }

    .ant-collapse>.ant-collapse-item {
        border: 1px solid @primary-color1  !important;
    }

    .ant-collapse-content {
        border: 1px solid @primary-color1  !important;
    }

    .ant-collapse>.ant-collapse-item>.ant-collapse-header {
        color: @graywhite-color  !important;
        padding: 4px 16px 4px 40px !important;
    }

    .ant-collapse-content>.ant-collapse-content-box{
        padding:8px !important;
    }
}


//button
@btn-default-color: @graywhite-color;
@btn-primary-bg: @primary-color2;
@btn-danger-bg: @danger-color;
// @btn-danger-border:@color-yellow;
:global {
    .ant-btn-danger{
        color:@text-color;
    }
    .ant-btn.active, .ant-btn:active,.ant-btn:focus, .ant-btn:hover{
        color:@graywhite-color;
    }
}


// timepick
@time-picker-selected-bg: @primary-color3;

:global {
    .ant-calendar {
        background: @dark-color !important;
        border: 1px solid @primary-color2 !important;
    }

    .ant-calendar-input-wrap {
        border: 1px solid @primary-color2 !important;
    }

    .ant-calendar-header,
    .ant-calendar-year-panel-header,
    .ant-calendar-month-panel-header {
        border-bottom: 1px solid @primary-color2 !important;

    }

    .ant-calendar-footer {
        border-top: 1px solid @primary-color2 !important;
    }

    .ant-calendar-month-panel,
    .ant-calendar-year-panel {
        background: @dark-color !important;
    }

    .ant-calendar-header .ant-calendar-century-select,
    .ant-calendar-header .ant-calendar-decade-select,
    .ant-calendar-header .ant-calendar-month-select,
    .ant-calendar-header .ant-calendar-year-select {
        color: @graywhite-color !important;
    }
}


// select
@select-selection-item-bg: @primary-color2;
@select-selection-item-border-color: @primary-color2;
:global{
    .ant-select-dropdown{
        background:@dark-color!important;
    }

    .ant-select-dropdown-menu-item:hover {
        background: @primary-color2 !important;
    }

    .ant-select-dropdown-menu-item-selected {
        background: @primary-color2 !important;
    }

    .ant-select-selection--multiple .ant-select-selection__choice{
        background-color: @primary-color2!important;
        border:1px solid @primary-color1!important;
    }
}

// table
@table-header-bg: @primary-color2;
@table-header-color: @graywhite-color;
@table-selected-row-hover-bg: @primary-color2;

:global {

    .ant-table-bordered .ant-table-body>table,
    .ant-table-bordered .ant-table-fixed-left table,
    .ant-table-bordered .ant-table-fixed-right table,
    .ant-table-bordered .ant-table-header>table {
        border: 1px solid @primary-color2 !important;
    }

    .ant-table-bordered .ant-table-tbody>tr>td,
    .ant-table-bordered .ant-table-thead>tr>th {
        border: 1px solid @primary-color2 !important;
    }

    .ant-table-bordered.ant-table-empty .ant-table-placeholder {
        border: 1px solid @primary-color2 !important;
    }

    .ant-empty-normal {
        color: @graywhite-color  !important;
    }

    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td,
    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
    .ant-table-tbody>tr.ant-table-row-selected td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td {
        background: @primary-color2  !important;
    }

    .ant-table-tbody {
        background: @dark-color2  !important;
    }

    .ant-table-small {
        border: 1px solid @primary-color2 !important;
    }

    .ant-table-small>.ant-table-content>.ant-table-body>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-fixed-left>.ant-table-body-outer>.ant-table-body-inner>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-fixed-left>.ant-table-header>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-fixed-right>.ant-table-body-outer>.ant-table-body-inner>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-fixed-right>.ant-table-header>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-header>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-scroll>.ant-table-body>table>.ant-table-thead>tr>th, 
    .ant-table-small>.ant-table-content>.ant-table-scroll>.ant-table-header>table>.ant-table-thead>tr>th{
        background: @primary-color2  !important;
    }

    .ant-table-small>.ant-table-content>.ant-table-body{
        margin:0px  !important;
    }
}

// tree
:global {
    .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
        color: @dark-color  !important;
    }
}


// modal
:global {
    .ant-modal{
        padding:0 !important;
    }

    .ant-modal-header {
        // border:1px solid @primary-color1 !important;
        // background: @primary-color2;
        border: none !important;
        background: none !important;
        width: 300px;
        margin: 0 auto;
        text-align: center;
        position: relative;

        .ant-modal-title {
            color: white !important;
            position: relative;
        }
    }

    .ant-modal-header::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-radius: 0px;
        background: @primary-color2;
        transform: perspective(50px) rotateX(-5deg);
        border: 1px solid @primary-color1  !important;
    }


    .ant-modal-content {
        background: @dark-color4  !important;
        border-radius: 15px !important;
    }

    .ant-modal {
        background: @dark-color4  !important;
        border: 1px solid @primary-color2  !important;
        box-shadow: 0px 0px 20px 2px @primary-color2 ;
        border-radius: 15px;
    }

    .ant-modal-close-x {
        color: @graywhite-color  !important;
    }

    .ant-modal-confirm-body .ant-modal-confirm-title {
        color: @graywhite-color  !important;
    }

    .ant-modal-footer{
        border-top:none !important;
    }

}


// form
@label-color: @graywhite-color;
:global {
    .ant-advanced-search-form .ant-form-item{
        margin-bottom: 0 !important;
    }
}

// input:-internal-autofill-selected{
//     background-color:@primary-color2;
// }

// card
@card-head-color: @graywhite-color;

:global {
    .ant-card-bordered {
        border: 1px solid @primary-color2  !important;
    }

    .ant-card-head {
        border: 1px solid @primary-color2  !important;
    }
}

// switch
:global {
    .ant-switch-inner {
        color: @primary-color2  !important;
    }

    .ant-switch-checked .ant-switch-inner {
        color: white !important;
    }
}


// slider
:global {
    .ant-slider-mark-text {
        color: white !important;
    }

    .ant-slider-with-marks{
        margin-bottom:0 !important;
    }
}

// radio
:global {
    .ant-radio-inner:after{
        background-color: @danger-color !important;
    }
}